<template>
    <my-card-title title="表单成员">
        <div slot="actions"
             v-if="false"
             style="display: flex;flex-direction: row;width: min-content;align-items: center;position: relative">
            <a-select
                    showSearch
                    mode="multiple"
                    placeholder="input search text"
                    style="width: 200px"
                    :defaultActiveFirstOption="false"
                    :showArrow="false"
                    :getPopupContainer="getPopupContainer"
                    :filterOption="false"
                    @select="selectHandle"
                    @search="handleSearch"
                    @change="handleChange"
                    notFoundContent="无搜索结果"
            >
                <a-select-option v-for="data in searchData" :key="data.key" >
                    {{data.value}}
                </a-select-option>
            </a-select>
        </div>
        <a-table class="my-table"
                 :columns="columns"
                 :dataSource="groupList"
                 :pagination="false">
        </a-table>
    </my-card-title>
</template>

<script>
    const columns = [
        {
            title: '用户名',
            dataIndex: 'userName',
            width: '10%',
            key: 'userName',
        },
        {
            title: '用户邮箱',
            dataIndex: 'userEmail',
            key: 'userEmail',
        },
        {
            title: '用户id',
            width: '10%',
            dataIndex: 'userId',
            key: 'userId',
        },
    ];
    export default {
        name: 'GroupList',
        props: {
            groupList: {
                type: Array,
                required: true,
            },
        },
        created () {
        },
        data () {
            return {
                searchData: [],
                columns: columns,
                selectedUser: [],
            };
        },
        methods: {
            handleSearch (value) {
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                // 优化查询，减少查询服务器
                if (value) {
                    this.timer = setTimeout(() => {
                        this.$apis.userAPI.searchUser(value).then((body)=>{
                            this.searchData = body.map((item) => ({
                                detail: item,
                                value: item.userName,
                                key: item.userName,
                            }));
                        });
                    }, 300);
                }
            },
            selectHandle (value, option) {
                console.log(value);
            },
            getPopupContainer (trigger) {
                return trigger.parentElement;
            },
            handleChange (info) {
            },
        },
    };
</script>

<style scoped>
    .components-input-demo-presuffix {
        width: 260px;
        height: 38px;
    }
    .components-input-demo-presuffix .anticon-close-circle {
        cursor: pointer;
        color: #ccc;
        transition: color 0.3s;
        font-size: 12px;
    }
    .components-input-demo-presuffix .anticon-close-circle:hover {
        color: #999;
    }
    .components-input-demo-presuffix .anticon-close-circle:active {
        color: #666;
    }
</style>
